<template>
	<view class="m-content">
		<view class="m-wrap">
			<view class="m-info r-flex">
				<u--image shape="circle" :src="modelShow==false?'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIO6eRuuA6V35h9AITl3UfH6SAsB4m9nD3ZmaFZFHPXprj7I8zia2cNkFTicvcXuWmu37BhQjmnuNBg/132':src" width="80px" height="80px"></u--image>
				<view class="info">
					<view class="m-title">{{modelShow==false?userInfo.username:"未登录"}}</view>
					<view class="m-email r-flex">
						<u-icon name="email" color="#b4b7bb"></u-icon>
						<text class="text">{{modelShow==false?(userInfo.email==null?"18356015272@163.com":userInfo.email):"-"}}</text>
					</view>
					<view class="m-email r-flex">
						<u-icon name="account" size="18" color="#b4b7bb"></u-icon>
						<text
							class="text">{{modelShow==false?(userInfo.description==null?"律师助理":userInfo.description):"-"}}</text>
					</view>
				</view>
				<view class="m-code"></view>
			</view>
			<view class="m-msg">
				<u-grid :border="true" col="3">
					<u-grid-item>
						<text class="grid-num">{{modelShow==false?18:0}}</text>
						<text class="grid-text">案件</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-num">{{modelShow==false?18:0}}</text>
						<text class="grid-text">消息</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-num">{{modelShow==false?18:0}}</text>
						<text class="grid-text">待办</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<u-gap height="12" bgColor="#f7f6fa"></u-gap>
		<view class="m-nav">
			<u-cell-group :border="false">
				<u-cell :border="false" isLink icon="/static/images/set.png" iconStyle="width: 24px;height:24px"
					rightIconStyle="color: #b4b7b4" url="/pages/member/accountSetting">
					<view style="margin-left: 8px;" slot="title" class="u-slot-title">
						<text class="u-cell-text">账号设置</text>
					</view>
				</u-cell>
				<u-gap height="1" bgColor="#f5f5f5" style="margin:2px 19px 2px 40px;"></u-gap>
				<u-cell :border="false" isLink icon="/static/images/zhuli.png" iconStyle="width: 24px;height:24px"
					rightIconStyle="color: #b4b7b4" url="/pages/member/addAssist">
					<view style="margin-left: 8px;" slot="title" class="u-slot-title">
						<text class="u-cell-text">添加助理</text>
					</view>
				</u-cell>
				<u-gap height="1" bgColor="#f5f5f5" style="margin:2px 19px 2px 40px;"></u-gap>
				<u-cell :border="false" isLink icon="/static/images/about.png" iconStyle="width: 24px;height:24px"
					rightIconStyle="color: #b4b7b4">
					<view style="margin-left: 8px;" slot="title" class="u-slot-title">
						<text class="u-cell-text">关于律案</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<u-gap height="12" bgColor="#f7f6fa"></u-gap>
		<view class="m-nav">
			<u-cell-group :border="false">
				<u-gap height="1" bgColor="#f5f5f5" style="margin:2px 19px 2px 40px;"></u-gap>
				<u-cell :border="false" isLink icon="/static/images/zsk.png" iconStyle="width: 24px;height:24px"
					rightIconStyle="color: #b4b7b4">
					<view style="margin-left: 8px;" slot="title" class="u-slot-title">
						<text class="u-cell-text">知识库</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<view class="isLogin">
			<u-modal :content="modelText" :show="modelShow" confirmText="立即登录" confirmColor="#1C5AD2"
				:closeOnClickOverlay="false" @confirm="confirmTo()"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				userInfo: {},
				modelText: "访问此资源需要完全的身份验证～",
				modelShow: false
			}
		},
		// 监听页面显示，刷新页面数据
		onShow() {
			// uni.showLoading({
			// 	title:"加载中"
			// })
			if (!uni.getStorageSync('OPEN-ID')) {
				// 如果未登录，则跳转到登录页面
				this.modelShow = true;
				uni.hideTabBar();
			} else {
				this.modelShow = false;
				uni.showTabBar();
				this.getUserInfo();
			}
		},
		mounted() {
			// uni.hideLoading();
			this.getUserInfo();
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				const that = this;
				let data = {};
				this.$sendRequest.getUserInfo(data).then((res) => {
					if (res.code == 200) {
						this.userInfo = JSON.parse(JSON.stringify(res.data));
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				}).catch(err => {})
			},
			confirmTo() {
				uni.redirectTo({
					url: "/pages/login/landPage"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-wrap {
		width: 100%;
		background-color: #fff;
		padding: 180rpx 30rpx 50rpx 30rpx;

		.m-info {
			align-items: center;
			margin-bottom: 50rpx;

			.info {
				margin-left: 24rpx;

				.m-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #0b101a;
				}

				.m-email {
					align-items: center;
					margin-top: 4rpx;
					color: #b4b7bb;

					.text {
						margin-left: 16rpx;
					}
				}
			}
		}
	}

	.grid-text {
		font-size: 30rpx;
	}

	.grid-num {
		font-size: 30rpx;
		font-weight: bold;
	}

	.m-msg /deep/ .u-border-right {
		border-color: #e5e5e5 !important;
	}

	.m-icon {
		margin-right: 8rpx;
	}

	.m-nav {
		margin: 0 15rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.isLogin /deep/ .u-modal {
		text-align: center;
	}

	.m-nav /deep/ .u-cell__body {
		padding: 30rpx 30rpx;
	}

	.m-nav /deep/ .u-gap {
		margin-left: 96rpx;
	}
</style>